<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>聊天</title>
    <link rel="stylesheet" href="../../css/aui.css">
     <link rel="stylesheet" href="../../css/common.css">
     <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
     <script language="JavaScript" src="../../script/common.js"></script>
    <script language="JavaScript" src="../../script/moment.min.js"></script>
    <script language="JavaScript" src="../../script/reconnecting-websocket.js"></script>
    <style>
        .chatlist{
            width: 100%;
            position: absolute;
            top:0;
            height: 90% ;
            z-index: 11;
            overflow-y:scroll;
        }
        .chatinput{
            width: 100%;
            position: absolute;
            bottom: 0;
            z-index: 15;
        }
    </style>
</head>
<body>
<div id="chat-box">
 
<section class="aui-chat chatlist"  id="chatlist">
    <div class="aui-chat-header" @click="getchat">查看更多</div>
    <div v-for="item, index in chatlist" >
    <div class="aui-chat-header" v-if="index == 0 || !isSameDay(item, chatlist[index - 1])">{{format(item.create_time)}}</div>
    <div class="aui-chat-item " :class="touid==item.to_uid ?'aui-chat-right':'aui-chat-left'">
        <div class="aui-chat-media">
            <img :src="item.send_uinfo.logo_url" onerror="this.src='__PUBLIC__/mobile/image/logo_default.png'" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">{{item.send_uinfo.nickname }} </div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                {{item.content}}
            </div>

        </div>
    </div>
</div>




</section>

<div class="chatinput aui-content"  >
    <ul class="aui-list aui-form-list">
         <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-input" style="width: 100%;">
                    <input type="text" v-model="msg"  />
                </div>
                <div class="aui-list-item-label aui-margin-r-15" style="width: 3.5rem;padding-right:0;" @click="sendmsg">
                    <div class="aui-btn   " style="width: 6rem;background-color:#e02e24;color:#fff">发送</div>
                </div>
            </div>
        </li>
    </ul>

</div>
</div>
<script>

    var pvm = new Vue({
        el:'#chat-box',
        data:{
            page:1,
            totalpage:1,
            totalnum:0,
            retback:true,
            chatlist:[],
            touid:0,
            socketaddress:socket_ip,
            wsconfig:{},
            msg:'',
            token:'',
            to_uinfo:{},
            sendstatus:false,
        },


        methods: {
             sendmsg:function () {
                 if(this.msg.length<1){
                    return;
                }
                this.sendstatus=true;
                $page.get_data('/api/chat/sendMsg','post',{touid:this.touid,msg:this.msg},function (ret) {
                   if(ret.errno===1000){
                        pvm.chatlist.push(ret.data);

                   }else{
                       $page.toast(ret.errmsg);
                   }
                });

            },
            scrolldown:function(){
                var chatlist = document.getElementById('chatlist');
                chatlist.scrollTop = chatlist.scrollHeight;
                 console.log("--------scrolldown---");
//                var rel = document.querySelector('#chatmsgend');
//                 rel.scrollIntoView();
            },
            isSameDay: function (from, to) {
                return pvm.format(from.create_time) == pvm.format(to.create_time);
            },
            format: function (text) {
                return moment(parseInt(text + '000', 10)).format('YYYY-MM-DD');
            },
            getchat:function () {
                this.sendstatus=false;
                if(pvm.page>pvm.totalpage || !pvm.retback){
                    return;
                }
                pvm.retback =false;
                $page.get_data('/api/chat/getChatMsg','post',{'page':pvm.page,'touid':this.touid,'token':this.token},function (ret) {
                  if(!pvm.to_uinfo.nickname)pvm.to_uinfo = ret.data.to_uinfo;
                    pvm.totalpage = ret.data.totalpage;
                     pvm.page = pvm.page+1;
                    pvm.retback = true;
                    pvm.totalnum = ret.data.totalnum;

                    ret.data.list.forEach(function(el){
                        pvm.chatlist.unshift(el);
                      });
                  //  pvm.scrolldown();
                    //pvm.scrollit(lastid);
                 });
            },
            socketload:function () {
                var address = this.socketaddress;
                var ws = new ReconnectingWebSocket(address);
                ws.onmessage = function (e) {
                   var result = JSON.parse(e.data);
                   console.log(result);
                   var msgtype = result.msgtype;
                   console.log(result.msgtype);
                   var data = result.data;
                     switch (msgtype){
                         case 'connect':
                             console.log("---dobind----");
                             $page.get_data('/api/chat/binduid','post',{client_id:data.client_id},function (ret) {
                                console.log("bind uid success");
                             });
                             break;
                         case 'chatinfo':
                             console.log('msg...');
                             console.log(data);
                             pvm.chatlist.push(data);

                             break;

                     }
                };

            },
            load_init:function () {
               pvm.page=1;
               //获得配置
               $page.get_data('/api/chat/getConfig','post',{token:this.token},function(ret){
                  pvm.wsconfig = ret.data;
                  pvm.socketaddress=ret.data.gateway_address;
               });
               pvm.getchat();
                pvm.socketload();
            }
        },
        updated:function () {
            console.log("----updating---");
            if(this.sendstatus){

                pvm.scrolldown();
            }

        },

    });


    apiready=function(){
        var pageParam = api.pageParam;
        pvm.touid = pageParam.touid;
        pvm.token = $api.getStorage('token');
        pvm.load_init();
    }




</script>
</body>
</html>
